import React, {Component, PropTypes} from 'react';
import {Row, Col, Card} from 'antd';
import styles from './Main.less';
import {getSubInfo} from "../../services/homeServer";
import {getHiveInfo} from "../../services/homeServer";

import cookie from 'js-cookie';

class HomeMainContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hive: {
        "time": "",
        "dbNum": 0,
        "tableNum": 0
      },
      sub: {
        "subNum": 0,
        "catNum": 0,
        "bindTableNum": 0
      },
    };
  }

  componentDidMount() {
  }

  componentWillMount() {
    var username = cookie.get('username');
    getSubInfo(username).then(function (json) {
      this.setState({
        sub: json,
      });
    }.bind(this));

    getHiveInfo().then(function (json) {
      this.setState({
        hive: json,
      });
    }.bind(this));

  }

  componentWillUnmount() {
  }

  render() {
    return (
      <div className={styles.content}>
        <div className={styles.home_llside}>
        </div>

        <div className={styles.home_lside}>
          <div style={{background: '#ECECEC'}}>
            <span style={{fontFamily: '微软雅黑', fontSize: '14px', fontWeight: 'bold'}}>个人资料</span>
          </div>
          <Card bodyStyle={{padding: 0}}>
            <img alt="example" width="100%" src="src/images/default.jpg"/>
            <h3 style={{textAlign: "center"}}>{cookie.get('username')}</h3>
          </Card>
        </div>
        <div className={styles.home_rside}>
          <Row>
            <Col span={24}>
              <Card title={<span style={{fontFamily: '微软雅黑', fontSize: '15px', fontWeight: 'bold'}}>Hive镜像状态</span>} >
                <p>最新同步时间：{this.state.hive.time}</p>
                <p>数据库总数：{this.state.hive.dbNum}</p>
                <p>表总数：{this.state.hive.tableNum}</p>
              </Card>
            </Col>
          </Row>
          <br/>
          <Row gutter={40}>
            <Col span={24}>
              <Card title={<span style={{fontFamily: '微软雅黑', fontSize: '15px', fontWeight: 'bold'}}>主题信息</span>}>
                <p>主题总数：{this.state.sub.subNum}</p>
                <p>分类总数：{this.state.sub.catNum}</p>
                <p>已绑定表总数：{this.state.sub.bindTableNum}</p>
              </Card>
            </Col>
          </Row>
        </div>
        <div className={styles.home_rrside}>
        </div>
      </div>
    );
  }
}

export default HomeMainContainer;
